<template>
    <div>
        <van-notice-bar left-icon="gem-o" background="#ecf9ff" color="#1989fa" :scrollable="false">
            项目展示
        </van-notice-bar>
    <div class="experience">
        <van-sidebar v-model="activeKey" style="width: 30%">
            <van-sidebar-item title="农业种植网" />
            <van-sidebar-item title="探鱼烤鱼在线管理系统" />
            <van-sidebar-item title="食将点餐小程序" />
        </van-sidebar>
        <div class="view" v-show="activeKey === 0">
            <h5>项目描述:</h5>
            <p>介绍农作物，罗列农业常见问题，农业常识，实用技术，还有展示农业种植过程中的搞笑图片和视频</p>
            <h5>项目展示</h5>
            <div><img :src="nong" alt=""></div>
            <h5>我的职责：</h5>
            <p>1. 运用flex布局将页面进行弹性布局</p>
            <p>2. 运用html,css，jquery编写页面，完成页面的渲染和交互</p>
            <p>3. 运用 AJAX 进行页面的数据请求</p>
        </div>
        <div class="view" v-show="activeKey === 1">
            <h5>项目描述:</h5>
            <p>展示员工列表，能对员工进行添加和删除等操作，对现有员工进行管理，完成员工在职离职还有出勤的管理</p>
            <h5>我的职责：</h5>
            <p>1.使用html+css进行网页的编写，美化页面，实现响应式布局，解决各种兼容性问题</p>
            <p>2.使用 element ui框架进行网页的快速搭建；</p>
            <p>3.通过vue对在线管理系统实现功能实现，用axios调用接口进行增删改等操作</p>
        </div>
        <div class="view" v-show="activeKey === 2">
            <h5>项目描述:</h5>
            <p>进行菜品的展示，对菜品酒水进行分类，点击分类出现不同的东西，添加购物车并下单。</p>
            <h5>项目展示</h5>
            <h5>我的职责：</h5>
            <p>1.使用scroll-view添加滚动的窗口，便于用户挑选自己想要的东西</p>
            <p>2.使用localstorage进行数据存储实现商品的详情展示</p>
            <p>3.使用ajax请求商品数据并渲染页面</p>
        </div>
    </div>
    </div>
</template>

<script>
    import nong from '../../public/img/nong.png'
    export default {
        name: "exp",
        data(){
            return{
                activeKey:0,
                nong:nong,
            }
        }
    }
</script>

<style scoped>
.experience{
    display: flex;
}
    .view{
        width: 70%;
    }
    .view img{
        width: 100%;

    }
</style>